<!--  -->
<template>
  <div>
      <swiper :options="swiperOption" class="topswiper">
        <swiper-slide>
          <img class="w-100" src="../assets/images/swiper1.jpeg" alt="">
        </swiper-slide>
        <swiper-slide>
          <img class="w-100" src="../assets/images/swiper2.jpeg" alt="">
        </swiper-slide>
        <swiper-slide>
          <img class="w-100" src="../assets/images/swiper1.jpeg" alt="">
        </swiper-slide>
        <swiper-slide>
          <img class="w-100" src="../assets/images/swiper2.jpeg" alt="">
        </swiper-slide>
        <!-- <div class="swiper-scrollbar"></div> -->
        <div class="swiper-pagination pagination-home text-right px-3 pb-2" slot="pagination"></div>
      </swiper>
      <!-- 图标导航 -->
      <div class="nav-icons bg-white mt-3 pt-3 text-center text-dark-1">
        <div class="d-flex flex-graw">
          <div class="nav-item mb-3" v-for="item in 10" :key="item">
            <i class="sprite" :class="`sprite-${item}`"></i>
            <div class="py-2">{{vals[item-1]}}</div>
          </div>
        </div>
        <div class="bg-light py-2 fs-sm">
          <i class="sprite sprite-arrow mr-1"></i>
          <span>收起</span>
        </div>
      </div>
      <!-- <m-card icon="Menu" title="新闻资讯"  style="touch-action: none;">
        <div class="nav jc-between">
          <div class="nav-item active">
            <div class="nav-link">热门</div>
          </div>
          <div class="nav-item">
            <div class="nav-link">新闻</div>
          </div>
          <div class="nav-item">
            <div class="nav-link">公告</div>
          </div>
          <div class="nav-item">
            <div class="nav-link">活动</div>
          </div>
          <div class="nav-item">
            <div class="nav-link">赛事</div>
          </div>
        </div>
          <div class="pt-3">
            <swiper>
              <swiper-slide v-for="m in 5" :key="m">
                <div class="py-2" v-for="i in 5" :key="i">
                  <span>[新闻]</span>
                  <span>|</span>
                  <span>夏日新版本"稷下星之队"即将六月上线</span>
                  <span>06/02</span>
                </div>
              </swiper-slide>
            </swiper>
          </div>
      </m-card> -->
      <m-list-card icon="Menu" title="新闻资讯" :categories="news">
        <template #items="{category}">
          <div class="py-2 fs-lg d-flex" v-for="(item,i) in category.newsList" :key="i">
            <span class="text-info">[{{ item.categoryName}}]</span>
            <span class="px-2">|</span>
            <span class="flex-1 text-dark">{{ item.title}}</span>
            <span>{{ item.updatedAt}}</span>
          </div>
        </template>
      </m-list-card>

      <p>aaa</p>
      <p>aaa</p>
      <p>aaa</p>
      <p>aaa</p>
      <p>aaa</p>
      <p>aaa</p>
      <p>aaa</p>
      <p>aaa</p>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
  news : [],
  vals : ['爆料站','故事站','周边商场','体验服','新人专区','荣耀传承','同人社区','王者营地','公众号','版本介绍'],
  swiperOption: {
    pagination: {
      el: ".pagination-home",
      clickable: true,
      // type: "bullets"
    },
    loop: true,
    initialSlide: 0,
    autoplay: {
      delay: 1500,
      stopOnLastSlide: false,
      disableOnInteraction: false
    },
    speed: 800,
    grabCursor: true,
    
//     scrollbar: {

// el: ".swiper-scrollbar",

// hide: true, //滚动条是否自动隐藏。默认：false，不会自动隐藏。

// draggable: true, //该参数设置为true时允许拖动滚动条。

// snapOnRelease: true, //如果设置为false，释放滚动条时slide不会自动贴合。

// dragSize: 30 //设置滚动条指示的尺寸。默认'auto': 自动，或者设置num(px)。

// },
}
}
},
methods: {
  set(val){
    return 'sprite sprite-'+val;
  },
  async fetchNews(){
    const res = await this.$http.get('news/list')
    this.news = res.data
  }
},
created() {
  this.fetchNews()
},
}
</script>

<style lang="scss">
  @import '../assets/scss/_variables.scss';
  .pagination-home{
  .swiper-pagination-bullet{
    opacity: 1;
    border-radius: 0.1538rem;
    background: map-get($colors,'white');
    &.swiper-pagination-bullet-active{
      background: map-get($colors,'info');
    }
  }
}
.nav-icons{
  touch-action: none;
  border-top: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
  .nav-item{
    width: 25%;
    border-left:1px solid $border-color;
    &:nth-child(4n+1){
      border-left: none;
    }
  }
}
</style>